<template>
<li :class="parentClassObj">
  <a :data-has-children="hasChildren" @click="itemHandler" :data-nav-position="item.position">
    <et-icon v-if="hasIcon" :name="iconName" />
    <span v-if="item.label">{{ $t(item.label) }}</span>
  </a>
  <ul v-if="hasChildren" :class="childClassObj" :data-nav-position="item.position">
    <menu-items v-for="(subItem, index) in item.children"
                :item="subItem"
                :is-drawer-nav="isDrawerNav"
                :key="index"
                :handler="handler"
                :activeItemPosition="activeItemPosition"
                :drawerIcon="drawerIcon"
                :canvas-id="canvasId"  />
  </ul>
</li>
</template>

<script>
import { EtIcon } from '../widgets';

export default {

  name: 'menu-items',

  components: {
    EtIcon
  },

  props: {
    item: {
      type: Object,
      required: true
    },
    handler: {
      type: Function
    },
    isDrawerNav: {
      type: Boolean
    },
    drawerIcon: {
      type: String
    },
    activeItemPosition: {
      type: String
    },
    canvasId: {
      type: String
    }
  },

  computed: {
    hasChildren() {
      return this.item.children ? true : false;
    },

    hasIcon() {
      return this.item.icon || this.isDrawerNav ? true : false;
    },

    iconName() {
      if (this.item.icon) {
        return this.item.icon;
      } else if (this.isDrawerNav) {
        return this.drawerIcon;
      }
    },

    parentClassObj() {
      return {
        "et-drawer-topmenu": this.isDrawerNav && this.item.position.split('-').length === 1
      };
    },

    childClassObj() {
      return {
        "menu": true,
        "vertical": true,
        "nested": !this.isDrawerNav,
        "et-drawer-menu2": this.isDrawerNav && this.item.position.split('-').length === 1,
        "et-drawer-menu3": this.isDrawerNav && this.item.position.split('-').length === 2,
        "menu-2": !this.isDrawerNav && this.item.position.split('-').length === 1,
        "menu-3": !this.isDrawerNav && this.item.position.split('-').length === 2
      };
    }

  },

  methods: {
    itemHandler() {
      if (this.item.path) {
        if (this.isDrawerNav) {
          $(`#${this.canvasId}`).foundation('close');
        }
        this.handler(this.item.position);
        this.$router.replace(this.item.path);
      }
    }
  }

};
</script>
